<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-初识WebGL</title>
</head>
<body onload="main()">
  <canvas id="glcanvas" width="640" height="480" style="background-color: red;"></canvas>
</body>
<script>
function main() {
  const canvas = document.getElementById('glcanvas')
  // 初始化 WebGL 上下文
  const gl = canvas.getContext('webgl')

  if(!gl) {
    alert('无法初始化 WebGL 上下文，您的浏览器、操作系统或硬件等可能不支持 WebGL。')
    return
  }
  // 使用完全不透明的黑色清除所有图像；clearColor: 设置清空颜色缓冲时的颜色值。
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  console.log(gl.getParameter(gl.COLOR_CLEAR_VALUE)); // getParameter  获取当前的清除颜色，传入常量 COLOR_CLEAR_VALUE 返回 Float32Array;
  // 用上面指定的颜色清除缓冲区
  gl.clear(gl.COLOR_BUFFER_BIT); // COLOR_BUFFER_BIT 颜色缓冲区；DEPTH_BUFFER_BIT 深度缓冲区；STENCIL_BUFFER_BIT 模板缓冲区；
}
</script>
</html>